﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>石头河灌溉大数据</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/comon0.css">

</head>
<script>
    $(window).load(function () {
        $(".loading").fadeOut()
    })
</script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<!--<script type="text/javascript" src="js/area_echarts.js"></script>-->
<body>
    <div class="canvas" style="opacity: .2">
        <iframe frameborder="0" src="js/index.html" style="width: 100%; height: 100%"></iframe>
    </div>
    <div class="loading">
        <div class="loadbox"> <img src="picture/loading.gif"> 页面加载中... </div>
    </div>
    <div class="head">
        <h1>陕西石头河灌溉驾驶舱</h1>
        <div class="weather"><!--<img src="picture/weather.png"><span>多云转小雨</span>--><span id="showTime"></span></div>

        <script>
            var t = null;
            t = setTimeout(time, 1000);//開始运行
            function time() {
                clearTimeout(t);//清除定时器
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours();//获取时
                var m = dt.getMinutes();//获取分
                var s = dt.getSeconds();//获取秒
                document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
                t = setTimeout(time, 1000); //设定定时器，循环运行
            }

        </script>


    </div>
    <div class="mainbox">
        <ul class="clearfix">
            <li>

                <div class="boxall" style="height: 2.5rem">
                    <div class="alltitle">最新水情2020-09-12</div>

                    <div class="sycm">
                        <ul class="clearfix">
                            <li><h2 style="color:#ffeb7b">1.2</h2><span>安乐灌溉站</span></li>
                            <li><h2 style="color:#ffeb7b">2.3</h2><span>齐镇灌溉站</span></li>
                            <li><h2 style="color:#ffeb7b">3.2</h2><span>金渠灌溉站</span></li>
                        </ul>
                        <div style="border-bottom: 1px solid rgba(255,255,255,.1);"></div>
                        <ul class="clearfix">
                            <li><h2 style="color:#ffeb7b">0</h2><span>汤峪灌溉站</span></li>
                            <li><h2 style="color:#ffeb7b">0</h2><span>青化灌溉站</span></li>
                            <li><h2 style="color:#ffeb7b">6.7</h2><span>合计</span></li>

                        </ul>


                    </div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.0rem;">
                    <div class="alltitle">年度灌溉（同比图）</div>
                    <div class="allnav" id="echart2"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 2.65rem">
                    <div class="alltitle">灌溉用水量作物占比</div>
                    <div class="allnav" id="echarts9"></div>
                    <div class="boxfoot"></div>
                </div>

            </li>
            <li>
                <div class="bar">
                    <div class="barbox">
                        <ul class="clearfix">
                            <li class="pulll_left counter">128</li>
                            <li class="pulll_left counter">391.4</li>
                            <li class="pulll_left counter">390</li>

                        </ul>
                    </div>
                    <div class="barbox2">
                        <ul class="clearfix">
                            <li class="pulll_left">用水量(m³) </li>
                            <li class="pulll_left">灌溉亩数(亩)</li>
                            <li class="pulll_left">用水金额(¥)</li>

                        </ul>
                    </div>
                </div>
                <div class="map" style="margin-top:15px">

                    <div class="map1"><img src="picture/lbx.png"></div>
                    <div class="map2"><img src="picture/jt.png"></div>
                    <div class="map3"><img src="picture/map.png"></div>
                    <!--<div class="map4" id="map_1"></div>-->

                    <div class="boxall" style="height: 6.83rem;">
                        <div class="tabs" style="visibility:collapse">
                            <ul class="clearfix">
                                <li><a class="active" href="#" style="color:#ffeb7b">日</a></li>
                                <li><a href="#" style="color:#ffeb7b">周</a></li>
                                <li><a href="#" style="color:#ffeb7b">月</a></li>
                                <li><a href="#" style="color:#ffeb7b">年</a></li>

                            </ul>
                        </div>
                        <div class="alltitle">各管理站用水量占比</div>

                        <div class="allnav" id="echart5"></div>
                        <div class="boxfoot"></div>
                    </div>
                </div>
            </li>
            <li>
                <div class="boxall" style="height:5.2rem">
                    <div class="alltitle">新增灌溉信息</div>
                    <div class="tabs" style="margin-bottom:20PX">
                        <ul class="clearfix">
                            <li><a class="active" href="#" style="color:#ffeb7b">日</a></li>
                            <li><a href="#" style="color:#ffeb7b">周</a></li>
                            <li><a href="#" style="color:#ffeb7b">月</a></li>
                            <li><a href="#" style="color:#ffeb7b">年</a></li>

                        </ul>
                    </div>
                    <div class="clearfix">
                        <div class="sy" id="echarts6"></div>
                        <div class="sy" id="echarts7"></div>
                        <div class="sy" id="echarts8"></div>
                    </div>
                    <div class="addnew">
                        <div class="tit02"><span>新增灌溉记录</span></div>
                        <div class="adduser">
                            <ul class="clearfix">
                                <li class="clearfix"> <span class="pulll_left"><img src="images/DTX.png">安乐灌溉站</span> <span class="pulll_right">西干2斗 -  ￥234 </span> </li>
                                <li class="clearfix"> <span class="pulll_left"><img src="images/DTX.png">安乐灌溉站</span> <span class="pulll_right">西干2斗 -  ￥264  </span> </li>
                                <li class="clearfix"> <span class="pulll_left"><img src="images/DTX.png">安乐灌溉站</span> <span class="pulll_right">西干1斗 - ￥134  </span> </li>
                                <li class="clearfix"> <span class="pulll_left"><img src="images/DTX.png">安乐灌溉站</span> <span class="pulll_right">西干2斗 -  ￥334  </span> </li>
                            </ul>
                        </div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height:3.1rem">
                    <div class="alltitle">各站月灌溉用水量曲线图</div>
                    <div class="allnav" id="echart4"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.2rem;display:none">
                    <div class="alltitle">模块标题样式</div>
                    <div class="allnav" id="echar"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3rem;display:none">
                    <div class="alltitle">模块标题样式</div>
                    <div class="allnav" id="echart6"></div>
                    <div class="boxfoot"></div>
                </div>
            </li>
        </ul>
    </div>
    <div class="back"></div>
    <script type="text/javascript">
        var v0 = 1000;
        var v1 = 353;
        var v2 = 178;
        var v3 = 68;
        var dpdata = {
            drsq: [
                { glz: '安乐灌溉站', 用水量: 43.3 },
                { glz: '齐镇灌溉站', 用水量: 83.1 },
                { glz: '金渠灌溉站', 用水量: 86.4 },
                { glz: '汤峪灌溉站', 用水量: 56.4 },
                { glz: '青化灌溉站', 用水量: 26.4 },
                { glz: '合计', 用水量: 126.4 }

            ],
            zsq: ["128", "391.4","390"],
            option2: {
                dimensions: ['nd', '用水量', '灌溉亩数', '用水金额'],
                source: [
                    { nd: '2019', 用水量: 43.3, 灌溉亩数: 85.8, 用水金额: 93.7 },
                    { nd: '2020', 用水量: 83.1, 灌溉亩数: 73.4, 用水金额: 55.1 },
                    { nd: '2021', 用水量: 86.4, 灌溉亩数: 65.2, 用水金额: 82.5 }
                ]

            },
            option4: {
                source: [
                    ['nd', '用水量', '灌溉亩数', '用水金额'],
                    ['2019', 43.3, 85.8, 93.7],
                    ['2020', 83.1, 73.4, 55.1],
                    ['2021', 86.4, 65.2, 82.5],
                ]

            },//
            option5: {
                dimensions: ['glz', '用水量', '灌溉亩数', '用水金额'],
                source:
                    [
                        { glz: '安乐灌溉站', 用水量: 43.3, 灌溉亩数: 85.8, 用水金额: 93.7 },
                        { glz: '齐镇灌溉站', 用水量: 83.1, 灌溉亩数: 73.4, 用水金额: 55.1 },
                        { glz: '金渠灌溉站', 用水量: 86.4, 灌溉亩数: 65.2, 用水金额: 82.5 },
                        { glz: '汤峪灌溉站', 用水量: 56.4, 灌溉亩数: 45.2, 用水金额: 32.5 },
                        { glz: '青化灌溉站', 用水量: 26.4, 灌溉亩数: 15.2, 用水金额: 22.5 }
                    ]
            },
            option9: {
                source: [{
                    name: "粮油作物",
                    value: "3720"
                },
                {
                    name: "经济作物",
                    value: "2920"
                }]

            }
        };
        var myChart2 = echarts.init(document.getElementById('echart2'));
        var myChart4 = echarts.init(document.getElementById('echart4'));
        var myChart5 = echarts.init(document.getElementById('echart5'));

        var myChart6 = echarts.init(document.getElementById('echarts6'));
        var myChart7 = echarts.init(document.getElementById('echarts7'));
        var myChart8 = echarts.init(document.getElementById('echarts8'));
        var myChart9 = echarts.init(document.getElementById('echarts9'));

        option2 = {
            //  backgroundColor: '#00265f',
            legend: {
                data: ['用水量', '灌溉亩数', '用水金额'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize: '12',
                }
            },
            dataset: {
                // 提供一份数据。
                source: dpdata.option2.source
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' }
            },
            grid: {
                left: '0%',
                top: '15px',
                right: '0%',
                bottom: '0%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },

                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    //formatter: '{value} %'
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [
                {
                    name: "用水量",
                    type: 'bar',
                    // barGap: 1, //柱子之间间距
                    itemStyle: {
                        normal: {
                            color: '#27d08a',
                            opacity: 1,
                            barBorderRadius: 2,
                        }
                    }
                },
                {
                    name: "灌溉亩数",
                    type: 'bar',
                    // barGap: 1, //柱子之间间距
                    itemStyle: {
                        normal: {
                            color: '#ffeb7b',
                            opacity: 1,
                            barBorderRadius: 2,
                        }
                    }
                },
                {
                    name: "用水金额",
                    type: 'bar',
                    // barGap: 1, //柱子之间间距
                    itemStyle: {
                        normal: {
                            color: '#F56C6C',
                            opacity: 1,
                            barBorderRadius: 2,
                        }
                    }
                }

            ]
        };
        option4 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#dddc6b'
                    }
                }
            },
            legend: {
                top: '0%',
                data: ['安乐站', '齐镇站', '金渠站', '汤峪站', '青化站'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize: '12',
                }
            },
            grid: {
                left: '10',
                top: '30',
                right: '10',
                bottom: '10',
                containLabel: true
            },

            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12,
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }

                },

                data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12']

            }, {

                axisPointer: { show: false },
                axisLine: { show: false },
                position: 'bottom',
                offset: 20,



            }],

            yAxis: [{
                type: 'value',
                axisTick: { show: false },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12,
                    },
                },

                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                }
            }],
            series: [
                {
                    name: '安乐站',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {

                        normal: {
                            color: '#0184d5',
                            width: 2
                        }
                    },

                    itemStyle: {
                        normal: {
                            color: '#0184d5',
                            borderColor: 'rgba(221, 220, 107, .1)',
                            borderWidth: 12
                        }
                    },
                    data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4, 3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4]

                },
                {
                    name: '齐镇站',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {

                        normal: {
                            color: '#00d887',
                            width: 2
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(0, 216, 135, 0.4)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(0, 216, 135, 0.1)'
                            }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#00d887',
                            borderColor: 'rgba(221, 220, 107, .1)',
                            borderWidth: 12
                        }
                    },
                    data: [5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5, 1, 4]

                },
                {
                    name: '金渠站',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {

                        normal: {
                            color: '#ffeb7b',
                            width: 2
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(0, 216, 135, 0.4)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(0, 216, 135, 0.1)'
                            }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#ffeb7b',
                            borderColor: 'rgba(221, 220, 107, .1)',
                            borderWidth: 12
                        }
                    },
                    data: [5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5, 1, 4]

                },
                {
                    name: '汤峪站',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {

                        normal: {
                            color: '#F56C6C',
                            width: 2
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(0, 216, 135, 0.4)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(0, 216, 135, 0.1)'
                            }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#F56C6C',
                            borderColor: 'rgba(221, 220, 107, .1)',
                            borderWidth: 12
                        }
                    },
                    data: [5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5, 1, 4]

                },
                {
                    name: '青化站',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {

                        normal: {
                            color: '#00d887',
                            width: 2
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(0, 216, 135, 0.4)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(0, 216, 135, 0.1)'
                            }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#00d887',
                            borderColor: 'rgba(221, 220, 107, .1)',
                            borderWidth: 12
                        }
                    },
                    data: [5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5, 1, 4]

                },
            ]

        };
        option5 = {
            //  backgroundColor: '#00265f',
            legend: {
                data: ['用水量', '灌溉亩数', '用水金额'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize: '12',
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            dataset: {
                // 提供一份数据。
                source: dpdata.option5.source
            },
            grid: {
                left: '0%',
                top: '20px',
                right: '0%',
                bottom: '6%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },

                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    //formatter: '{value} %'
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [{
                name: "用水量",
                type: 'bar',
                // barGap: 1, //柱子之间间距
                itemStyle: {
                    normal: {
                        color: '#27d08a',
                        opacity: 1,
                        barBorderRadius: 2,
                    }
                }
            },
            {
                name: "灌溉亩数",
                type: 'bar',
                // barGap: 1, //柱子之间间距
                itemStyle: {
                    normal: {
                        color: '#ffeb7b',
                        opacity: 1,
                        barBorderRadius: 2,
                    }
                }
            },
            {
                name: "用水金额",
                type: 'bar',
                // barGap: 1, //柱子之间间距
                itemStyle: {
                    normal: {
                        color: '#F56C6C',
                        opacity: 1,
                        barBorderRadius: 2,
                    }
                }
            }]
        };

        option6 = {
            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#27d08a',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v1,
                    label: {
                        normal: {
                            formatter: function (params) {
                                return v1 + "m³";
                            },
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }]
            }]

        };
        option7 = {
            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#fccb00',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v2,
                    name: '新增灌溉亩数',
                    label: {
                        normal: {
                            formatter: v2 + '亩',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }]
            }]
        };
        option8 = {


            series: [{

                type: 'pie',
                radius: ['70%', '80%'],
                color: '#F56C6C',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v3,
                    name: '新增用水金额',
                    label: {
                        normal: {
                            formatter: v3 + '¥',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }]
            }]
        };




        let formatNumber = function (num) {
            let reg = /(?=(\B)(\d{3})+$)/g;
            return num.toString().replace(reg, ',');
        }
        let total = dpdata.option9.source.reduce((a, b) => {
            return a + b.value * 1
        }, 0);
        option9 = {
            color: ['#27d08a', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'],
            // tooltip: {
            //     trigger: 'item'
            // },
            title: [{
                text: '{name|总量}\n{val|' + formatNumber(total) + '}',
                top: 'center',
                left: 'center',
                textStyle: {
                    rich: {
                        name: {
                            fontSize: 14,
                            fontWeight: 'normal',
                            color: '#ffeb7b',
                            padding: [5, 0]
                        },
                        val: {
                            fontSize: 14,
                            fontWeight: 'bold',
                            color: '#ffeb7b',
                        }
                    }
                }
            }],
            series: [{
                type: 'pie',
                radius: ['65%', '55%'],
                center: ['50%', '50%'],
                data: dpdata.option9.source,
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        borderColor: "#fff",
                        borderWidth: 2
                    }
                },
                labelLine: {
                    normal: {
                        length: 10,
                        length2: 50,
                        lineStyle: {
                            color: '#ffeb7b'
                        }
                    }
                },
                label: {
                    normal: {
                        formatter: params => {
                            return (
                                '{icon|●}{name|' + params.name + '}{value|' +
                                formatNumber(params.value) + '}'
                            );
                        },
                        padding: [0, -50, 15, -50],
                        rich: {
                            icon: {
                                fontSize: 12
                            },
                            name: {
                                fontSize: 12,
                                padding: [0, 10, 0, 4],
                                color: '#ffeb7b'
                            },
                            value: {
                                fontSize: 12,
                                fontWeight: 'bold',
                                color: '#ffeb7b'
                            }
                        }
                    }
                },
            }]
        };

        setTimeout(function () {
            myChart2.setOption(option2);
            myChart4.setOption(option4);
            myChart5.setOption(option5);
            myChart6.setOption(option6);
            myChart7.setOption(option7);
            myChart8.setOption(option8);
            myChart9.setOption(option9);

        }, 500);

    </script>
    <script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
    <script type="text/javascript" src="js/jquery.countup.min.js"></script>
    <script type="text/javascript">


        $(document).ready(function () {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 20 })
            $(window).resize(function () {
                var whei = $(window).width()
                $("html").css({ fontSize: whei / 20 })
            });
            var html2 = $(".adduser ul").html()
            $(".adduser ul").append(html2)
            var ls2 = $(".adduser li").length / 2 + 1
            a = 0
            ref = setInterval(function () {
                a++
                if (a == ls2) {
                    a = 1
                    $(".adduser ul").css({ marginTop: 0 })
                    $(".adduser ul").animate({ marginTop: -'.5' * a + 'rem' }, 800)
                }
                $(".adduser ul").animate({ marginTop: -'.5' * a + 'rem' }, 800)


            }, 4300);


            myChart2.resize();
            myChart4.resize();
            myChart5.resize();
            myChart6.resize();
            myChart7.resize();
            myChart8.resize();
            myChart9.resize();
            $('.counter').countUp();


        })
        window.addEventListener("resize", function () {
            myChart2.resize();
            myChart4.resize();
            myChart5.resize();
            myChart6.resize();
            myChart7.resize();
            myChart8.resize();
            myChart9.resize();

        });
    </script>

</body>
</html>
